<template>
  <div id="shopcar">
    <div class="cart">
      <table>
        <thead>
          <tr>
            <th width="120">
              <div class="xtx-checkbox">
                <input
                  type="checkbox"
                  v-model="selectedAll"
                  @change="checkAll()"
                />
                <span>全选</span>
              </div>
            </th>
            <th width="400">商品信息</th>
            <th width="220">单价</th>
            <th width="180">数量</th>
            <th width="180">小计</th>
            <th width="140">操作</th>
          </tr>
        </thead>
        <tbody>
          <!---->
          <tr v-for="(A, index) in $store.state.cart" :key="A.skuId">
            <td>
              <div class="xtx-checkbox">
                <input
                  type="checkbox"
                  v-model="A.selected"
                  @change="checkOne(A)"
                />
              </div>
            </td>
            <td>
              <div class="goods">
                <a href="javascript:;" class=""
                  ><img :src="A.picture" alt=""
                /></a>
                <div>
                  <p class="name ellipsis">{{ A.name }}</p>
                  <div class="cart-sku">
                    <div class="attrs">
                      <span class="ellipsis">{{ A.attrsText }}</span
                      ><i class="iconfont icon-angle-down"></i>
                    </div>
                    <!---->
                  </div>
                </div>
              </div>
            </td>
            <td class="tc">
              <p>¥{{ A.price }}</p>
              <!---->
            </td>
            <td class="tc">
              <div class="xtx-numbox">
                <!---->
                <div class="numbox">
                  <a href="javascript:;" @click="del(A)">-</a>
                  <input type="text" readonly="" v-model="A.count" />
                  <a href="javascript:;" @click="add(A)">+</a>
                </div>
              </div>
            </td>
            <td class="tc">
              <p class="f16 red">¥{{ A.price * A.count }}</p>
            </td>
            <td class="tc">
              <p>
                <a href="javascript:;">移入收藏夹</a>
              </p>
              <p>
                <span class="green" href="javascript:;" @click="shopcar(A)"
                  >删除</span
                >
              </p>
              <p>
                <a href="javascript:;">找相似</a>
              </p>
            </td>
          </tr>
        </tbody>
        <!---->
      </table>
    </div>
    <div class="action">
      <div class="batch">
        <div class="xtx-checkbox">
          <input type="checkbox" v-model="selectedAll" @change="checkAll()" />
          <span>全选</span>
        </div>
        <a href="javascript:;" @click="shopcarAll(A)">删除商品</a
        ><a href="javascript:;">移入收藏夹</a
        ><a href="javascript:;">清空失效商品</a>
      </div>
      <div class="total">
        共 {{ this.$store.getters.setcarsize }} 件商品，已选择
        {{ this.$store.getters.setcarsizes }}件，商品合计：
        <span class="red">¥{{ this.$store.getters.setcarvalues }}</span
        ><button class="xtx-button ellipsis middle primary" data-v-1e3a5560="">
          下单结算
        </button>
      </div>
    </div>
    <Commodity></Commodity>
  </div>
</template>

<script>
import Commodity from './commodity.vue';
export default {
  name: 'VueProject01Shopcar',
  components: {
    Commodity,
  },
  data() {
    return {
      num: 1,
      shopCarlist: [],
      selectedAll: false,
    };
  },

  mounted() {
    this.membercart();
  },

  methods: {
    add(item) {
      var skuId = item.skuId;
      var count = item.count + 1;
      console.log(count);
      this.axios({
        method: 'PUT',
        url: 'https://apipc-xiaotuxian-front.itheima.net/member/cart/' + skuId,
        headers: {
          Authorization: `Bearer ${this.$store.state.token}`,
        },
        data: {
          count,
        },
      }).then((res) => {
        console.log(res);
        this.membercart();
      });
    },
    del(item) {
      if (item.count - 1 >= 1) {
        var skuId = item.skuId;
        var count = item.count - 1;
        console.log(count);
        this.axios({
          method: 'PUT',
          url:
            'https://apipc-xiaotuxian-front.itheima.net/member/cart/' + skuId,
          headers: {
            Authorization: `Bearer ${this.$store.state.token}`,
          },
          data: {
            count,
          },
        }).then((res) => {
          console.log(res);
          this.membercart();
        });
      }
    },
    membercart() {
      this.axios({
        url: 'https://apipc-xiaotuxian-front.itheima.net/member/cart',
        post: 'post',
        headers: {
          Authorization: `Bearer ${this.$store.state.token}`,
        },
      }).then((res) => {
        if (res.data.result) {
          var array = res.data.result;
          this.selectedAll = true;
          res.data.result.forEach((i) => {
            if (!i.selected) {
              this.selectedAll = false;
            }
          });
          console.log(this.selectedAll);
          this.$store.commit('setcar', array);
        }
      });
    },
    checkOne(item) {
      var selected = item.selected;
      this.axios({
        method: 'PUT',
        url:
          'https://apipc-xiaotuxian-front.itheima.net/member/cart/' +
          item.skuId,
        headers: {
          Authorization: `Bearer ${this.$store.state.token}`,
        },
        data: {
          selected,
        },
      }).then((res) => {
        console.log(res);
        this.membercart();
      });
    },
    checkAll() {
      var ids = [];
      this.$store.state.cart.forEach((z) => {
        console.log(z.skuId);
        ids.push(z.skuId);
      });
      var selected = this.selectedAll;
      this.axios({
        method: 'PUT',
        url: 'https://apipc-xiaotuxian-front.itheima.net/member/cart/selected',
        headers: {
          Authorization: `Bearer ${this.$store.state.token}`,
        },
        data: {
          ids,
          selected,
        },
      }).then((res) => {
        console.log(res);
        this.membercart();
      });
    },
    shopcar(A) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.axios({
            method: 'DELETE',
            url: 'https://apipc-xiaotuxian-front.itheima.net/member/cart',
            post: 'DELETE',
            headers: {
              Authorization: `Bearer ${this.$store.state.token}`,
              'Content-Type': 'application/json;charset=utf-8',
            },
            data: {
              ids: [A.skuId],
            },
          }).then((res) => {
            this.$message({
              type: 'success',
              message: '删除成功!',
            });
            if (res.data.msg == '操作成功') {
              this.membercart();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          });
        });
    },
    shopcarAll() {
      var ids = [];
      this.$store.state.cart.forEach((z) => {
        console.log(z.skuId);
        ids.push(z.skuId);
      });
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.axios({
            method: 'DELETE',
            url: 'https://apipc-xiaotuxian-front.itheima.net/member/cart',
            post: 'DELETE',
            headers: {
              Authorization: `Bearer ${this.$store.state.token}`,
              'Content-Type': 'application/json;charset=utf-8',
            },
            data: {
              ids,
            },
          }).then((res) => {
            this.$message({
              type: 'success',
              message: '删除成功!',
            });
            if (res.data.msg == '操作成功') {
              this.membercart();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          });
        });
    },
  },
};
</script>

<style scoped lang="scss">
#shopcar {
  background: rgb(240, 240, 240);
}
.cart {
  width: 1240px;
  height: auto;
  margin: 0 auto;
  background: #fff;
  color: #666;
  table {
    border-spacing: 0;
    border-collapse: collapse;
    line-height: 24px;
    thead {
      tr {
        th {
          font-size: 16px;
          font-weight: 400;
          line-height: 50px;
          &:first-child {
            text-align: left;
            padding-left: 30px;
            color: #999;
          }
          .xtx-checkbox {
            display: inline-block;
            margin-right: 2px;
            i {
              position: relative;
              top: 1px;
              &::before {
                content: '\e627';
              }
            }
            .iconfont {
              font-family: 'iconfont' !important;
              font-size: 16px;
              font-style: normal;
              -webkit-font-smoothing: antialiased;
              -moz-osx-font-smoothing: grayscale;
            }
            .icon-checked {
            }
          }
        }
      }
    }
    tbody {
      tr {
        td {
          padding: 10px;
          border-bottom: 1px solid #f5f5f5;
          &:first-child {
            text-align: left;
            padding-left: 30px;
            color: #999;
          }
          .xtx-checkbox {
            display: inline-block;
            margin-right: 2px;
          }
          .goods {
            display: flex;
            align-items: center;
            a {
              text-decoration: none;
              color: #333;
              outline: none;
              img {
                width: 100px;
                height: 100px;
              }
            }
            & > div {
              width: 280px;
              font-size: 16px;
              padding-left: 10px;
              .ellipsis {
                text-overflow: ellipsis;
                overflow: hidden;
              }
              .cart-sku {
                height: 28px;
                border: 1px solid #f5f5f5;
                padding: 0 6px;
                position: relative;
                margin-top: 10px;
                display: inline-block;
                .attrs {
                  line-height: 24px;
                  display: flex;
                  span {
                    max-width: 230px;
                    font-size: 14px;
                    color: #999;
                  }
                  .ellipsis {
                    text-overflow: ellipsis;
                    overflow: hidden;
                  }
                }
              }
            }
          }
        }
        .tc {
          text-align: center;
          p {
            font-size: 16px;
            .green {
              color: #27ba9b;
            }
          }
          .xtx-numbox {
            margin: 0 auto;
            width: 120px;
            .numbox {
              width: 120px;
              height: 30px;
              border: 1px solid #e4e4e4;
              display: flex;
              a {
                width: 29px;
                line-height: 28px;
                text-align: center;
                background: #f8f8f8;
                font-size: 16px;
                color: #666;
                &:first-of-type {
                  border-right: 1px solid #e4e4e4;
                }
                &:last-of-type {
                  border-left: 1px solid #e4e4e4;
                }
              }
              input {
                width: 60px;
                font-size: 16px;
                padding: 0 5px;
                text-align: center;
                color: #666;
                border: none;
                outline: none;
              }
            }
          }
          .f16 {
            font-size: 16px;
          }
          .red {
            color: #cf4444;
          }
        }
      }
    }
  }
}
.action {
  width: 1240px;
  height: 80px;
  margin: 20px auto;
  display: flex;
  background: #fff;
  margin-top: 20px;
  height: 80px;
  align-items: center;
  font-size: 16px;
  justify-content: space-between;
  padding: 0 30px;
  .batch {
    display: flex;
    .xtx-checkbox {
    }
    a {
      margin-left: 20px;
    }
  }
  .total {
    .red {
      font-size: 18px;
      margin-right: 20px;
      font-weight: 700;
      color: #cf4444;
    }
    .primary {
      border-color: #27ba9b;
      background: #27ba9b;
      color: #fff;
    }
    .middle {
      width: 180px;
      height: 50px;
      font-size: 16px;
    }
    .xtx-button {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      border: none;
      outline: none;
      // background: #fff;
      text-align: center;
      border: 1px solid transparent;
      border-radius: 4px;
      cursor: pointer;
    }
  }
}
</style>
